<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
    index: String,
  },
});
</script>

<template>
  <view class="ad-item">
    <view class="ad-item-type">{{ info.cate_name }}</view>
    <view class="ad-item-index">{{ index }}</view>
    <view style="display: flex; justify-content: center">
      <view class="ad-item-word" v-for="(i, d) of info.name_arr" :key="d">
        <image
          class="ad-item-word2"
          src="@/package/other/static/interpretation-index-word.png"
        />
        <view class="ad-item-word3">{{ i }}</view>
      </view>
    </view>
    <view class="ad-item-title">释义</view>
    <view class="ad-item-content">{{ info.content }}</view>
    <view class="ad-item-more" v-if="info.content.length > 171">
      全部
      <image
        class="ad-item-more2"
        src="@/package/other/static/interpretation-index-arrow.png"
      />
    </view>
  </view>
</template>

<style lang="scss">
.ad-item {
  position: relative;
  height: 100%;
  padding-top: 130rpx;
  border-radius: 20rpx;
  border: 2rpx solid #e8dcb5;
  background-color: #fff9e8;
  // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(113, 71, 8, 0.1);
  box-sizing: border-box;

  .ad-item-type,
  .ad-item-index {
    position: absolute;
    top: 40rpx;
    color: #810a00;
  }

  .ad-item-type {
    left: 30rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: bold;
  }

  .ad-item-index {
    right: 30rpx;
    font-size: 26rpx;
    line-height: 36rpx;
  }

  .ad-item-word {
    position: relative;
    margin: 0 10rpx;
  }

  .ad-item-word2 {
    display: block;
    width: 84rpx;
    height: 84rpx;
  }

  .ad-item-word3 {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 56rpx;
    color: #a75236;
    line-height: 80rpx;
    font-weight: bold;
    transform: translate(-50%, -50%);
  }

  .ad-item-title {
    width: 104rpx;
    margin: 40rpx auto 18rpx 30rpx;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 46rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #9b2626;
  }

  .ad-item-content {
    height: 504rpx;
    margin: 0 30rpx 10rpx;
    font-size: 26rpx;
    color: #693b37;
    line-height: 56rpx;
    text-align: justify;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .ad-item-more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32rpx;
    font-size: 24rpx;
    color: #740000;
    line-height: 32rpx;
    font-weight: bold;
  }

  .ad-item-more2 {
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
  }
}
</style>